<html>
    <head>
        <title>概念</title>
    </head>
    <body>
        <script>
            //  概念

                /*
                    1、组件是视图层的基本祖册还给你单元

                    2、组件是一个单独为可复用的的功能模块的封装

                    3、一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。

                            <1>、根节点为 <template>，这个<template>下只能且必须有一个根 <view>组件。这是vue单文件组件规范。

                            <2>、一个组件的data选项必须是一个函数 
                                
                                        (因为组件是复用的，所以组件很可能有多个实例，所以使用函数返回对象，来让每个实例维护一份被返回对象的独立拷贝。)

                    ★、示例：
                        
                            下面是一个基本组件示例，在根<view>组件下在此引入一个<view>组件，并给组件的 text 区绑定一个data。

                            <template>
                                <view>
                                    <view>{{userName}}</view>
                                </view>
                            </template>
                            <script>
                                export default {
                                    data() {
                                        return {
                                            "userName":"foo"
                                        }
                                    }
                                }
                            </、script>

                            基础组件是内置在 uni-app框架中的，包括  view、text、input、button、video 等及时和基础组件  

                                 列表详见：  https://uniapp.dcloud.net.cn/component/README?id=%e5%9f%ba%e7%a1%80%e7%bb%84%e4%bb%b6

                            但仅有基础组件是不够用的，实际爱开发中会有很多封装的组件。

                            比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到 : https://ext.dcloud.net.cn/plugin?id=33.

                            把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示这个五角星组件。

                            eg:
                                    -- 在index.vue页面引用 uni-rate 组件-->
                                    <template>
                                        <view>
                                            <uni-rate></uni-rate>  -- 这里会显示一个五角星，并且点击后会自动亮星 --
                                        </view>
                                    </template>
                */


                /*
                   二、 优势

                           可以将组件进行任意次数的复用。

                           合理的划分组件，有助于提高应用性能。

                           代码更加方便组织和管理，并且扩展性也强，便于多人协同开发。

                           组件化开发能大幅度提高应用开发效率、测试率、复用性等。
                */
        </script>
    </body>
</html>